<script setup lang="ts">
  import { ref, defineEmits, watch, onMounted } from 'vue';
  import { useBooleanStore } from '@/store';
  import { getCarTaskPage } from '@/api/les';

  const emit = defineEmits(['updateArray']);
  const booleanStore = useBooleanStore();
  // 表单查询数据
  const carEndPosition = ref<string>('');
  const carStartPosition = ref<string>('');
  const carTaskType = ref<string>('');
  const taskCode = ref<string>('');

  // 获取昨天天的日期
  const yesterday = new Date();
  yesterday.setDate(yesterday.getDate() - 1);
  // 获取今天的日期
  const today = new Date();
  const taskStartExecuteTime = ref<string>('');
  const taskEndExecuteTime = ref<string>('');

  const pageSize = ref<number>(10);
  const pageNumber = ref<number>(1);

  // 表格数据
  async function handleSearch() {
    const newData = await getCarTaskPage({
      current: pageNumber.value,
      size: pageSize.value,
      carEndPosition: carEndPosition.value,
      carStartPosition: carStartPosition.value,
      carTaskType: carTaskType.value,
      taskCode: taskCode.value,
      taskEndExecuteTime: taskEndExecuteTime.value,
      taskStartExecuteTime: taskStartExecuteTime.value,
    });
    emit('updateArray', newData);
  }
  // 重置
  function reset() {
    carEndPosition.value = '';
    carStartPosition.value = '';
    carTaskType.value = '';
    taskCode.value = '';
    taskEndExecuteTime.value = '';
    taskStartExecuteTime.value = '';

    handleSearch();
  }
  onMounted(() => {
    handleSearch();
  });
  // 监听分页
  watch([() => booleanStore.pageNum, () => booleanStore.pageSize], () => {
    if (booleanStore.num5 === 53) {
      pageNumber.value = booleanStore.pageNum;
      pageSize.value = booleanStore.pageSize;
      handleSearch();
    }
  });
  watch(
    () => booleanStore.update,
    () => {
      if (booleanStore.num6 === 30) handleSearch();
    }
  );
</script>

<template>
  <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
    <a-col :span="6">
      <div>
        <a-select
          v-model="carTaskType"
          placeholder="任务类型"
          size="large"
          allow-clear
        >
          <a-option value="库内搬运任务">库内搬运任务</a-option>
          <a-option value="库外搬运任务">库外搬运任务</a-option>
        </a-select>
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input
          v-model="taskCode"
          placeholder="任务编号"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input
          v-model="carStartPosition"
          placeholder="车起始位置"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input
          v-model="carEndPosition"
          placeholder="车结束位置"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
  </a-row>

  <a-row :gutter="{ md: 8, lg: 24, xl: 32 }" style="margin-top: 10px">
    <a-col :span="6">
      <a-date-picker
        v-model="taskStartExecuteTime"
        style="width: 100%"
        placeholder="最早开始时候"
        show-time
        format="YYYY-MM-DD HH:mm:ss"
        size="large"
        allow-clear
      />
    </a-col>
    <a-col :span="6">
      <a-date-picker
        v-model="taskEndExecuteTime"
        style="width: 100%"
        placeholder="最晚开始时间"
        show-time
        format="YYYY-MM-DD HH:mm:ss"
        size="large"
        allow-clear
      />
    </a-col>
  </a-row>

  <div class="btn-group">
    <a-button type="primary" size="large" @click="handleSearch">查询</a-button>
    <a-button class="btn-reset" size="large" @click="reset">重置</a-button>
    <!-- <a-button type="primary" class="btn-reset" size="large">分配班组</a-button> -->
    <!-- <a-button type="primary" class="btn-reset" size="large">下发计划</a-button> -->
  </div>
</template>

<style scoped>
  .btn-group {
    float: right;
    margin-top: 15px;
  }

  .btn-reset {
    margin-left: 10px;
  }
</style>
